<template>
  <div>
    <video ref="video" controls style="width: 100%; height: 20px;"></video>
  </div>
</template>
 
<script>
import Hls from 'hls.js';
 
export default {
  name: 'M3U8Preview',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    const video = this.$refs.video;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(this.src);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegURL')) {
      video.src = this.src;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    }
  },
  beforeDestroy() {
    if (this.hls) {
      this.hls.destroy();
    }
  }
};
</script>